<template>
  <el-button @click="handleConfirm" link type="primary" v-bind="$attrs">
    {{ state.enable == 1 ? '禁用' : '启用' }}
  </el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
const emit = defineEmits(['confirm'])

const props = defineProps({
  row: {
    type: Object,
    required: true
  },
  valueField: {
    type: String,
    default: 'enable'
  },
  tipText: {
    type: String,
    default: '这行数据'
  }
})

const state = reactive({
  loading: false,
  enable: false,
  title: '',
  confirmButtonText: ''
})

watch(
  () => props.row,
  () => {
    const enable = props.row[props.valueField]

    const confirmButtonText = enable == 1 ? '禁用' : '启用'

    state.enable = enable
    state.title = `确定要${confirmButtonText}${props.tipText}吗？`
    state.confirmButtonText = confirmButtonText
  },
  {
    immediate: true
  }
)

function handleConfirm() {
  const { title, confirmButtonText } = state
  ElMessageBox.confirm(title, '系统提示', {
    confirmButtonText,
    cancelButtonText: '取消',
    center: true,
    draggable: true
  }).then(() => {
    emit('confirm', props.row, 'auth')
  })
}
</script>

<style lang="scss" scoped></style>
